<template>
  <div class="paylist">
    <div class="payTop">
      <div class="playall">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zhankai1"></use>
        </svg>
        <span>播放全部</span>
        <p>共({{ }})首</p>
      </div>
      <div class="Collection">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sorting"></use>
        </svg>
        <span>收藏</span>
        <p>({{ subscribedCount }})</p>
      </div>
    </div>
    <div class="lists" v-for="(item, index) in itemlist" :key="index">
      <div class="listLeft" @click="playMusic(index)">
        <p>{{ index + 1 }}</p>
        <div class="names">
          <div class="al">{{ item.name }}</div>
          <div class="ar" v-for="(item1, index) in item.ar" :key="index">{{ item1.name }}</div>
        </div>
      </div>
      <div class="listRight">
        <p>
          <svg class="icon" aria-hidden="true" v-if="item.mv != 0">
            <use xlink:href="#icon-phone5"></use>
          </svg>
        </p>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liebiao2"></use>
        </svg>
      </div>
    </div>
  </div>



</template>

<script>
import { mapMutations } from 'vuex';


export default {
  setup(props) {
    console.log(props);
    //通过props进行传值，判断如果数据拿不到，就获取sessionStorage中的数据

    return {

    }
  },
  // peops: ['itemlist']
  props: {
    itemlist: {
      type: Array,
      default: () => []
    },
    subscribedCount: {
      type: Number

    }
  },
  methods: { 
    playMusic:function(index) {
      this.updatePlayList(this.itemlist)
      this.updatePlayListIndex(index)
    },
    ...mapMutations(['updatePlayList','updatePlayListIndex'])
  }

}
</script>

<style lang="less" scoped>
.paylist {
  width: 100%;
  background-color: #ddd;
  border-top-left-radius: .4rem;
  border-top-right-radius: .4rem;

  .payTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .playall {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;

      span {
        font-size: .4rem;
        margin-left: .2rem;
      }

      p {
        font-size: .2rem;
        margin-left: .1rem;
        color: #999;
      }
    }

    .Collection {
      height: .8rem;
      display: flex;
      align-items: center;
      border-radius: .8rem;
      background-image: linear-gradient(to right, #fc7e31, #ff5a24);
      padding: .1rem;
    }
  }

  .lists {
    width: 100%;
    height: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    // margin-left:.2rem;
    // margin-right: .2rem;
    .listLeft {
      width: 70%;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: .2rem;

      p {
        text-align: center;
        margin-right: .4rem;
      }

      .names {
        .al {
          color: #000;
        }

        .ar {
          color: #999;
          margin-top: .2rem;
          font-size: .2rem;
        }
      }
    }

    .listRight {
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: .2rem;

      p {
        margin-right: .4rem;
      }
    }

  }
}
</style>